<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>生鲜超市-用户中心</title>
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/main.css" />
		<link rel="stylesheet" href="/css/element.css" />
	</head>

	<body>
		<div id="app">
			<div class="header_con">
				<div class="header">
					<div class="welcome fl">欢迎来到生鲜超市!</div>

					<div class="fr">
						<div class="login_info fl" v-if="isLogin">
							欢迎您：<em>{{user.nickname}}</em>
							<span>&emsp;|&emsp;</span>
						</div>

						<div class="login_btn fl" v-if="!isLogin">
							<a href="/login.html">登录</a>
							<span>|</span>
							<a href="/register.html">注册</a>
						</div>

						<div class="user_link fl" v-else>
							<a href="/">首页</a>
							<span>|</span>
							<a href="/html/cart.html">我的购物车</a>
							<span>|</span>
							<a href="/html/user_center.html">用户中心</a>
							<span>|</span>
							<a href="javascript:;" @click="logout">退出登录</a>
						</div>
					</div>
				</div>
			</div>

			<div class="search_bar clearfix">
				<a href="/" class="logo fl">
					<img src="/images/logo.jpg" height="94px" style="margin-top: -15px"/>
				</a>

				<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>

				<div class="search_con fr">
					<input class="input_text fl" v-model="search" placeholder="搜索商品" />
					<input type="button" class="input_btn fr" value="搜索" @click="query" />
				</div>
			</div>

			<div class="main_con clearfix">
				<div class="left_menu_con clearfix">
					<h3>用户中心</h3>

					<ul>
						<li><a href="javascript:;" :class="index == 0 ? 'active' : ''" @click="menuChange(0)">· 个人信息</a></li>
						<li><a href="javascript:;" :class="index == 1 ? 'active' : ''" @click="menuChange(1)">· 全部订单</a></li>
						<li><a href="javascript:;" :class="index == 2 ? 'active' : ''" @click="menuChange(2)">· 收货地址</a></li>
					</ul>
				</div>

				<!--个人信息-->
				<div class="right_content clearfix" v-if="index == 0">
					<div class="info_con clearfix">
						<h3 class="common_title2">基本信息</h3>

                        <ul class="user_info_list">
                            <li><span>昵称：</span>{{user.nickname}}</li>
                            <li><span>用户名：</span>{{user.username}}</li>
                            <li><span>联系方式：</span>{{user.phone}}</li>
                            <li><span>联系地址：</span>{{user.address}}</li>
                        </ul>
                    </div>

                    <h3 class="common_title2">最近浏览</h3>

                    <div class="has_view_list">
                        <ul class="goods_type_list clearfix">
							<li v-for="history in histories">
								<a :href="'/html/detail.html?id=' + history.product.id">
									<img :src="history.product.imgUrl"  alt="" />
								</a>

								<h4>
									<a :href="'/html/detail.html?id=' + history.product.id">
										{{history.product.name}}
									</a>
								</h4>

								<div class="operate">
									<span class="prize">
										￥{{history.product.price}}
									</span>

									<span class="unit">
										{{history.product.price}}/{{history.product.unit}}
									</span>

									<a href="javascript:;" class="add_goods" title="加入购物车"
									   @click="toCart(history.product.id)"></a>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<!--全部订单-->
				<div class="right_content clearfix" v-if="index == 1">
					<h3 class="common_title2">
						<ul class="detail_tab clearfix">
							<li :class="state == 0 ? 'active' : ''" @click="select(0)">全部</li>
							<li :class="state == 1 ? 'active' : ''" @click="select(1)">待付款</li>
							<li :class="state == 2 ? 'active' : ''" @click="select(2)">配送中</li>
							<li :class="state == 4 ? 'active' : ''" @click="select(4)">待收货</li>
							<li :class="state == 5 ? 'active' : ''" @click="select(5)">完成</li>
							<li :class="state == 6 ? 'active' : ''" @click="select(6)">已取消</li>
						</ul>
					</h3>

					<div v-for="order in orders">
						<ul class="order_list_th w978 clearfix">
							<li class="col01">{{order.created}}</li>
							<li class="col02">订单号：{{order.orderId}}</li>
							<li class="col02 stress">
								{{states[order.state - 1]}}
							</li>
						</ul>

						<table class="order_list_table w980">
							<tbody>
								<tr>
									<td width="55%">
										<ul class="order_goods_list clearfix" v-for="sub in order.subOrders">
											<li class="col01">
												<img :src="sub.product.imgUrl"  alt="" />
											</li>

											<li class="col02">
												{{ sub.product.name }}
												<em>{{ sub.product.price }}元/{{ sub.product.unit }}</em>
											</li>
											<li class="col03">{{ sub.quantity }}</li>
											<li class="col04">{{ sub.product.price }}元</li>
										</ul>
									</td>

									<td width="15%">{{order.total}}元</td>
									<td width="15%">
										{{array[order.state - 1] != undefined ? array[order.state - 1] : states[order.state - 1]}}
									</td>
									<td width="15%">
										<!--待支付状态下显示【去付款】按钮-->
										<a href="javascript:;" class="oper_btn" @click="pay(order.id)"
										   v-if="order.state == 1">去付款</a>

										<!--待支付、已支付状态下显示【取消订单】按钮-->
										<a href="javascript:;" class="oper_btn" @click="cancel(order.id)"
										   v-if="order.state == 1 || order.state == 2">取消订单</a>

										<!--已支付状态下显示【修改订单】按钮-->
										<a href="javascript:;" class="oper_btn" @click="modify(order.id)"
										   v-if="order.state == 2">修改订单</a>

										<!--配送中状态下显示【查看物流】按钮-->
										<a href="javascript:;" class="oper_btn" @click="lookup(order.orderId)"
										   v-if="order.state == 3">查看物流</a>

										<!--已送达状态下显示【确认收货】按钮-->
										<a href="javascript:;" class="oper_btn" @click="receive(order.id)"
										   v-if="order.state == 4">确认收货</a>

										<!--已收货状态下显示【去评价】按钮-->
										<!--<a href="javascript:;" class="oper_btn" @click="comment(order.id)"
										   v-if="order.state == 5">去评价</a>-->

										<!--已取消状态下显示【再来一单】按钮-->
										<a href="javascript:;" class="oper_btn" @click="again(order.id)"
										   v-if="order.state == 5 || order.state == 6">再来一单</a>

										<!--已取消状态下显示【删除订单】按钮-->
										<a href="javascript:;" class="oper_btn" @click="del(order.id)"
										   v-if="order.state == 6">删除订单</a>
									</td>
								</tr>
							</tbody>
						</table>

						<!--修改订单表单-->
						<div v-if="display == order.id">
							<table>
								<tr>
									<td>收货人姓名：</td>
									<td><input v-model="distribution.receiver" /></td>
								</tr>

								<tr>
									<td>联系电话：</td>
									<td><input v-model="distribution.phone" /></td>
								</tr>

								<tr>
									<td>配送地址：</td>
									<td><textarea v-model="distribution.address" ></textarea></td>
								</tr>

								<tr>
									<td>订单备注：</td>
									<td><textarea v-model="distribution.note"></textarea></td>
								</tr>

								<tr>
									<td colspan="2">
										<a href="javascript:;" class="oper_btn" @click="ensure">确认</a>
									</td>
								</tr>
							</table>
						</div>

						<div class="block" v-if="tracksDisplay == order.orderId">
							<div class="radio">
								<el-tag type="success">
									<i class="el-icon-time"></i>时间排序
								</el-tag>

								<el-radio-group v-model="reverse">
									<el-radio :label="true">倒序</el-radio>
									<el-radio :label="false">正序</el-radio>
								</el-radio-group>
							</div><br />

							<el-timeline :reverse="reverse">
								<el-timeline-item v-for="(up, index) in stateHistory"
												  :key="index" color="#0bbd87"
												  :timestamp="up.updateTime">
									{{up.status.name}}
								</el-timeline-item>
							</el-timeline>
						</div>
					</div>

					<div class="pagenation">
						<el-pagination background
									   layout="total, sizes, prev, pager, next, jumper"
									   @current-change="handleCurrentChange"
									   @size-change="handleSizeChange"
									   :hide-on-single-page="value"
									   :current-page="currentPage"
									   :page-sizes="pageSizes"
									   :page-size="pageSize"
									   :total="total">
						</el-pagination>
					</div>
				</div>

				<!--收货地址-->
				<div class="right_content clearfix" v-if="index == 2">
					<h3 class="common_title2">
						收货地址
						&nbsp;|&nbsp;
						<a href="javascript:;" @click="add">添加地址</a>
						&nbsp;|&nbsp;
						<a href="javascript:;" @click="update">编辑地址</a>
					</h3>

					<div class="site_con">
						<dl>
							<dd v-for="r in recs">
								<el-radio v-model="rec.id" :label="r.id" @change="fill">
									{{ r.address }} （{{ r.name }} 收） {{ r.phone }}
								</el-radio>
							</dd>
						</dl>
					</div>

					<div v-if="show">
						<h3 class="common_title2">{{title}}</h3>

						<div class="site_con">
							<div>
								<div class="form_group">
									<label>收件人姓名：</label>
									<input v-model="rec.name" />
								</div>

								<div class="form_group form_group2">
									<label>收货地址：</label>
									<textarea class="site_area" v-model="rec.address"></textarea>
								</div>

								<div class="form_group">
									<label>收货手机：</label>
									<input v-model="rec.phone" />
								</div>

								<input type="button" value="提交" class="info_submit" @click="submit" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/user_center.js"></script>
	</body>
</html>
